<template>
	<view class="container">
		<view class="">
			<u-swiper :list="list6" @change="e => currentNum = e.current" :radius="0" :autoplay="true" :height="263"
				indicatorStyle="right: 32rpx;bottom:84rpx;" circular>
				<view slot="indicator" class="indicator-num">
					<image class="swiper-icon" src="/static/wineshop/swiper.png" mode=""></image>
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</u-swiper>
		</view>

		<view class="wrapper">
			<view class="tabs">
				<view class="tabs-content">
					<view class="tabs-item" @click="handleTabs(1)"
						:class="state == 1?'tabs-item-active-1':'tabs-item-active-1-end'">
						<view class="text">酒店</view>
						<view class="background"></view>
					</view>
					<view class="tabs-item" @click="handleTabs(2)"
						:class="state == 2?'tabs-item-active-2':'tabs-item-active-2-end'">
						<view class="text">会议</view>
						<view class="background"></view>
					</view>
				</view>
				
				<view class="tabs-tips">

					<view class="tabs-tips-cell-1" style="flex-direction: column;padding-top: 15px; border-bottom: 1px solid #f2f2f2;" v-if="state == 1">
						<view class="hotel-text-1">
							<view class="title">北京梅地亚中心</view>
							<view class="tips">[四星/高档]</view>
						</view>
						<view class="hotel-text-2">
							<view class="title">北京海淀区复兴路乙11号(西三环)</view>
							<view class="tips">军事博物馆地铁站-E2口步行250米，约4分钟</view>
						</view>
					</view>
					
					<view class="tabs-tips-cell-1" style="flex-direction: column;padding-top: 15px; border-bottom: 1px solid #f2f2f2;" v-if="state == 2">
						<view class="" style="font-size: 26rpx;color: #1F1F1F;padding-bottom: 15px;">
							<text style="font-size: 30rpx;">销售人员电话：</text>
							<text>68550066,13910151736</text>
						</view>
						<view class="hotel-text-2">
							<view class="title">北京海淀区复兴路乙11号(西三环)</view>
							<view class="tips">军事博物馆地铁站-E2口步行250米，约4分钟</view>
						</view>
					</view>

					<view class="tabs-tips-cell-2" v-if="state == 1" @click="handleShowSlectorTime">
						<view class="time">
							<view class="time-text">
								<text class="tips">今天入住</text>
								<text style="font-weight: 700;">{{startTime | dateFormat}}</text>
							</view>
							<view class="time-texttime-text">—</view>
							<view class="time-text">
								<text class="tips">明天离店</text>
								<text style="font-weight: 700;">{{endTime | dateFormat}}</text>
							</view>
						</view>
						<view class="numb">
							<text>共{{selectorTime.length - 1}}晚</text>
							<view class="" style="margin-top: 6rpx;">
								<u-icon name="arrow-right" color="#FD8F19" size="8"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="components">
				<wineshop-list :selectorTime="selectorTime" ref="wineshop-list" v-if="state == 1"></wineshop-list>
				<meetingList ref="meeting-list" v-if="state == 2"></meetingList>
			</view>
		</view>

		<!-- 日期 -->
		<u-calendar :show="showTimeSlector" color="#f74062" mode="range" @close="showTimeSlector = false"
			@confirm="handleConfirm"></u-calendar>
	</view>
</template>
<script>
	import meetingList from "./components/meeting-list.vue";
	import wineshopList from "./components/wineshop-list.vue";
	export default {
		components: {
			wineshopList,
			meetingList
		},
		data() {
			return {
				state: 1, //1 酒店 2 会议
				currentNum: 0,
				showTimeSlector: false,
				list6: [
					"https://hxc.ctvig.com/profile/upload/2023/03/23/1_20230323170229A001.png"
				],
				startTime: undefined,
				endTime: undefined,
				selectorTime: [], //选中的时间
			}
		},
		onLoad(options) {
			let date = new Date();
			this.startTime = date.getTime();
			let startTime = date.getTime();
			date.setDate(date.getDate() + 1);
			this.endTime = date.getTime();
			let endTime = date.getTime();
			this.selectorTime = [this._dateFormat(startTime),this._dateFormat(endTime)];
			if(options.type){
				this.handleTabs(2);
			}
		},
		methods: {
			handleConfirm(options) {
				this.startTime = options[0].replace(/\-/g, "/");
				this.endTime = options[options.length - 1].replace(/\-/g, "/");
				this.selectorTime = options;
				this.showTimeSlector = false;
				this.getComLoad();
			},
			handleShowSlectorTime() {
				this.showTimeSlector = true;
			},
			handleChange(e) {
				console.log('轮播图内容：', e);
			},
			handleTabs(state) {
				this.state = state;
				this.getComLoad();
			},
			getComLoad() {
				this.$nextTick(() => {
					if (this.state == 1) this.$refs['wineshop-list'].getList(this.selectorTime);
					if (this.state == 2) this.$refs['meeting-list'].getList();
				});
			},
			_dateFormat(date) {
				if (!date) return '';
				let fmt = "YYYY-mm-dd";
				date = new Date(date);
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString() // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
					}
				}
				return fmt;
			}
		},
		onShow() {
			this.getComLoad();
		},
		filters: {
			dateFormat(date) {
				if (!date) return '';
				let fmt = "mm月dd日";
				date = new Date(date);
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString() // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
					}
				}
				return fmt;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.hotel-text-1,
	.hotel-text-2 {
		.title {
			font-size: 30rpx;
		}

		.tips {
			font-size: 24rpx;
		}
	}

	.hotel-text-1 {
		display: flex;
		align-items: flex-end;
		margin-bottom: 32rpx;

		.title {
			font-weight: bold;
		}

		.tips {
			color: #FD8F19;
			margin-left: 20rpx;
		}
	}

	.hotel-text-2 .tips {
		color: #878787;
		margin-top: 8rpx;
	}

	.components {
		padding-top: 24rpx;
		border-radius: 30rpx;
	}

	.wrapper {
		width: 686rpx;
		margin: 0 auto;
		margin-top: -70rpx;

		.tabs {
			border-radius: 30rpx;
			overflow: hidden;

			.tabs-tips {
				// background-color: #FFFFFF;

				.tabs-tips-cell-2 {
					display: flex;
					justify-content: space-between;
					padding: 80rpx 0rpx 24rpx 0rpx;
					background-color: #FFFFFF;

					.numb {
						font-size: 24rpx;
						color: #FD8F19;
						display: flex;
						align-items: center;
					}

					.time {
						display: flex;
						align-items: center;

						.time-texttime-text {
							margin: 0 24rpx;
						}

						.time-text {
							position: relative;
							font-size: 32rpx;
							color: #1F1F1F;

							.tips {
								position: absolute;
								font-size: 24rpx;
								color: #878787;
								left: 0rpx;
								top: -46rpx;
							}
						}
					}
				}

				.tabs-tips-cell-1 {
					display: flex;
					padding: 48rpx 0;
					background-color: #FFFFFF;

					.item {
						flex: 1;
						justify-content: center;
						display: flex;
						align-items: center;

						&+.item {
							border-left: 1px solid #EEEEEE;
						}

						.item-icon {
							width: 32rpx;
							height: 30rpx;
							margin-right: 12rpx;
						}

						.item-title {
							font-size: 26rpx;
						}

						.item-text {
							font-size: 26rpx;
							color: #1F1F1F;

							&+.item-text {
								margin-top: 4rpx;
							}
						}
					}
				}
			}

			.tabs-content {
				display: flex;

				.tabs-item {
					flex: 1;
					background-color: #F4F3F8;
					height: 80rpx;
					font-size: 32rpx;
					line-height: 80rpx;
					text-align: center;
					color: #1F1F1F;
					// border-radius: 0 0 0 30rpx;
					position: relative;

				}

				.tabs-item-active-1,
				.tabs-item-active-2,
				.tabs-item-active-1-end,
				.tabs-item-active-2-end {
					.text {
						position: absolute;
						z-index: 1;
						left: 0;
						top: 0;
						bottom: 0;
						right: 0;
					}

					.background {
						position: absolute;
						z-index: 0;
						left: 0;
						top: 0;
						bottom: 0;
						right: 0;
					}
				}

				.tabs-item-active-1 {
					.text {
						background-color: #FFFFFF;
						border-radius: 0 30rpx 0 0;
					}

					.background {
						background-color: #F4F3F8;
					}
				}

				.tabs-item-active-2 {
					.text {
						background-color: #FFFFFF;
						border-radius: 0 0 0 30rpx;
					}

					.background {
						background-color: #F4F3F8;
					}
				}

				.tabs-item-active-1-end {
					.text {
						background-color: #F4F3F8;
						border-radius: 0 30rpx 0 0;
					}

					.background {
						background-color: #FFFFFF;
					}
				}

				.tabs-item-active-2-end {
					.text {
						background-color: #F4F3F8;
						border-radius: 0 0 0 30rpx;
					}

					.background {
						background-color: #FFFFFF;
					}
				}




			}
		}

	}

	.indicator-num {
		width: 95rpx;
		height: 40rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		background: rgba(0, 0, 0, 0.8);
		border-radius: 40rpx;

		.swiper-icon {
			width: 26rpx;
			height: 22rpx;
			margin-right: 8rpx;
		}
	}

	uni-page-body {
		background-color: #F7F7F7 !important;
	}
</style>
